<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图标添加</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>

<div class="container" id="roleAdd">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <form class="form-horizontal" action="" method="post">
        <h2 class="form-signin-heading" style="color: black">角色添加</h2>

        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">服务类型</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" v-model="iconInfo.name">
            </div>
        </div>

        <div class="form-group">
            <label for="file" class="col-sm-2 control-label">图标缩略图（建议上传100*100或200*200的图片）：</label>
            <div class="col-sm-10">
                <input type="file" id="file" accept="image/*" class="form-control" name="file"/>
            </div>
        </div>

        <div class="form-group">
            <label for="orders" class="col-sm-2 control-label">orders</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="orders" v-model="iconInfo.orders">
            </div>
        </div>

        <div class="form-group">
            <label for="groupId" class="col-sm-2 control-label">服务类型</label>
            <div class="col-sm-10">
                <select name="pid" v-model="iconInfo.groupId" class="form-control">
                    <option class="form-control" id="groupId" v-for="g in groupList " v-bind:value="g.id">
                        {{g.name}}
                    </option>
                </select>
            </div>
        </div>

        <div>
            <button class="btn btn-lg btn-primary btn-block" type="button"
                    @click="addIcon()" style="width: 100%">提交
            </button>
        </div>
    </form>
</div>

<script>
    new Vue({
        el: "#roleAdd",
        data: {
            iconInfo: {},
            groupList: []
        },
        created() {   //创建
            this.GroupInfo();
        },
        methods: {
            //订阅返现
            GroupInfo() {
                var vm = this;
                $.post("/group/findAll", {}, function (response) {
                    if (response.code == 200) {
                        vm.groupList = response.data;
                    }
                })
            },
            //添加用户
            addIcon() {
                var vm = this;
                var formData =new FormData();
                var inputDOM = document.getElementById("file");
                var file = inputDOM.files[0];
                formData.append("file", file);
                formData.append("name", vm.iconInfo.name);
                formData.append("orders", vm.iconInfo.orders);
                formData.append("groupId", vm.iconInfo.groupId);

                $.ajax({
                    url: "add",
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    async: false,
                    success: function (result) {
                        if (response.code == 200) {
                            layer.msg('提交成功！', {
                                time: 1000,
                                end: function () {
                                    parent.layer.close(parent.layer.getFrameIndex(window.name)),
                                        vm.loadData();
                                    //    存在小页面的话，该语句是关闭页面的
                                }
                            })
                        } else {
                            layer.msg('提交失败！', {
                                time: 1000,
                            })
                        }
                    }
                });
            }
        }
    })
</script>
</body>
</html>